<template>
  <div class="left-container">
      <!-- 第一种使用全局计算属性{{$store.getters.isAll}} -->
      <!-- 第二种使用全局计算属性 -->
    <h3>Left 组件  是否全选:{{isAll}}</h3>
    <hr />
    <!-- 获取全局数据的第一种方法 {{$store.state.count}} -->
    <p>count 值：{{ count }}</p>
    <!-- 第一种方法修改全局数据 -->
    <!-- <button @click="$store.commit('add', { num: 1 })" class="btn btn-primary"> -->
    <!-- 辅助函数修改全局属性 -->
    <button @click="add({ num: 1 })" class="btn btn-primary">+1</button>
    <!-- 第一种执行异步操作 -->
    <!-- <button @click="$store.dispatch('addAsync')" class="btn btn-danger">+1</button> -->
    <button @click="addAsync" class="btn btn-danger">+1</button>
  </div>
</template>

<script>
// 按需导入辅助函数
import { mapState, mapMutations, mapActions,mapGetters } from "vuex";
export default {
  name: "Left",
  computed: {
    ...mapState(["count"]),
    ...mapGetters(['isAll'])
  },
  methods: {
    ...mapMutations(["add"]),
    ...mapActions(["addAsync"]),
  },
};
</script>

<style>
</style>
